
<template>
  <div class="flex">
  <div class="app-container" id="chart_example" >
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="监测点" prop="pointer">
          <el-input
            v-model="queryParams.pointer"
            placeholder="请输入监测点"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="空气质量" prop="air">
          <el-input
            v-model="queryParams.air"
            placeholder="请输入空气质量"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="噪音" prop="noise">
          <el-input
            v-model="queryParams.noise"
            placeholder="请输入噪音"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="PM10" prop="pm10">
          <el-input
            v-model="queryParams.pm10"
            placeholder="请输入PM10"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="PM2.5" prop="pm25">
          <el-input
            v-model="queryParams.pm25"
            placeholder="请输入PM2.5"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入地址"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['online:cscec:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['online:cscec:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['online:cscec:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['online:cscec:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="cscecList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" prop="id" />
        <el-table-column label="监测点" align="center" prop="pointer" />
        <el-table-column label="空气质量" align="center" prop="air" />
        <el-table-column label="噪音" align="center" prop="noise" />
        <el-table-column label="PM10" align="center" prop="pm10" />
        <el-table-column label="PM2.5" align="center" prop="pm25" />
        <el-table-column label="地址" align="center" prop="address" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['online:cscec:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['online:cscec:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改实时监控对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="监测点" prop="pointer">
            <el-input v-model="form.pointer" placeholder="请输入监测点" />
          </el-form-item>
          <el-form-item label="空气质量" prop="air">
            <el-input v-model="form.air" placeholder="请输入空气质量" />
          </el-form-item>
          <el-form-item label="噪音" prop="noise">
            <el-input v-model="form.noise" placeholder="请输入噪音" />
          </el-form-item>
          <el-form-item label="PM10" prop="pm10">
            <el-input v-model="form.pm10" placeholder="请输入PM10" />
          </el-form-item>
          <el-form-item label="PM2.5" prop="pm25">
            <el-input v-model="form.pm25" placeholder="请输入PM2.5" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入地址" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
   </div>
   <div class=baidumap id="container"></div>
   </div>

</template>

<script>
import { listCscec, getCscec, delCscec, addCscec, updateCscec } from "@/api/cscec/test";
 export default {
     name: 'BMapGL',
     components: {
     },
       data() {
         return {
           // 遮罩层
           loading: true,
           // 选中数组
           ids: [],
           // 非单个禁用
           single: true,
           // 非多个禁用
           multiple: true,
           // 显示搜索条件
           showSearch: true,
           // 总条数
           total: 0,
           // 实时监控表格数据
           cscecList: [],
           // 弹出层标题
           title: "",
           // 是否显示弹出层
           open: false,
           // 查询参数
           queryParams: {
             pageNum: 1,
             pageSize: 10,
             pointer: null,
             air: null,
             noise: null,
             pm10: null,
             pm25: null,
             address: null
           },
           // 表单参数
           form: {},
           // 表单校验
           rules: {
           }
         };
       },
     mounted() {
         this.baiduMap();

     },
     created() {
         this.getList();

       },
       methods: {
         /** 查询实时监控列表 */
         getList() {
           this.loading = true;
           listCscec(this.queryParams).then(response => {
             this.cscecList = response.rows;
             this.total = response.total;
             this.loading = false;
           });
         },
         // 取消按钮
         cancel() {
           this.open = false;
           this.reset();
         },
         // 表单重置
         reset() {
           this.form = {
             id: null,
             pointer: null,
             air: null,
             noise: null,
             pm10: null,
             pm25: null,
             address: null
           };
           this.resetForm("form");
         },
         /** 搜索按钮操作 */
         handleQuery() {
           this.queryParams.pageNum = 1;
           this.getList();
         },
         /** 重置按钮操作 */
         resetQuery() {
           this.resetForm("queryForm");
           this.handleQuery();
         },
         // 多选框选中数据
         handleSelectionChange(selection) {
           this.ids = selection.map(item => item.id)
           this.single = selection.length!==1
           this.multiple = !selection.length
         },
         /** 新增按钮操作 */
         handleAdd() {
           this.reset();
           this.open = true;
           this.title = "添加实时监控";
         },
         /** 修改按钮操作 */
         handleUpdate(row) {
           this.reset();
           const id = row.id || this.ids
           getCscec(id).then(response => {
             this.form = response.data;
             this.open = true;
             this.title = "修改实时监控";
           });
         },
         /** 提交按钮 */
         submitForm() {
           this.$refs["form"].validate(valid => {
             if (valid) {
               if (this.form.id != null) {
                 updateCscec(this.form).then(response => {
                   this.msgSuccess("修改成功");
                   this.open = false;
                   this.getList();
                 });
               } else {
                 addCscec(this.form).then(response => {
                   this.msgSuccess("新增成功");
                   this.open = false;
                   this.getList();
                 });
               }
             }
           });
         },
         /** 删除按钮操作 */
         handleDelete(row) {
           const ids = row.id || this.ids;
           this.$confirm('是否确认删除实时监控编号为"' + ids + '"的数据项?', "警告", {
               confirmButtonText: "确定",
               cancelButtonText: "取消",
               type: "warning"
             }).then(function() {
               return delCscec(ids);
             }).then(() => {
               this.getList();
               this.msgSuccess("删除成功");
             }).catch(() => {});
         },
             /** 导出按钮操作 */
             handleExport() {
               this.download('online/cscec/export', {
                 ...this.queryParams
               }, `online_cscec.xlsx`)
             },
        baiduMap() {
          var map = new BMapGL.Map('container');

                map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
                  function ZoomControl() {
                      this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                      this.defaultOffset = new BMapGL.Size(20, 20)
                  }
                  ZoomControl.prototype = new BMapGL.Control();
                   ZoomControl.prototype.initialize = function(map) {
                               //创建一个dom元素
                              var div = document.createElement('div');
                               //添加文字说明
                              div.appendChild(document.createTextNode('缩小2级'));
                                // 设置样式
                              div.style.cursor = "pointer";
                              div.style.padding = "7px 10px";
                              div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
                              div.style.borderRadius = "5px";
                              div.style.backgroundColor = "white";
                              // 绑定事件,点击一次放大两级
                              div.onclick = function(e){
                                  map.setZoom(map.getZoom() - 2);
                              }
                              // 添加DOM元素到地图中
                              map.getContainer().appendChild(div);
                              // 将DOM元素返回
                              return div;
                          }
                          var myZoomCtrl = new ZoomControl();
                          map.addControl(myZoomCtrl);

map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
                  function ZoomControl1() {
                      this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
                      this.defaultOffset = new BMapGL.Size(100, 20)
                  }
                  ZoomControl1.prototype = new BMapGL.Control();
                   ZoomControl1.prototype.initialize = function(map) {
                               //创建一个dom元素
                              var div = document.createElement('div');
                               //添加文字说明
                              div.appendChild(document.createTextNode('放大2级'));
                                // 设置样式
                              div.style.cursor = "pointer";
                              div.style.padding = "7px 10px";
                              div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
                              div.style.borderRadius = "5px";
                              div.style.backgroundColor = "white";
                              // 绑定事件,点击一次放大两级
                              div.onclick = function(e){
                                  map.setZoom(map.getZoom() + 2);
                              }
                              // 添加DOM元素到地图中
                              map.getContainer().appendChild(div);
                              // 将DOM元素返回
                              return div;
                          }
                          var myZoomCtrl1 = new ZoomControl1();
                          map.addControl(myZoomCtrl1);


          var point = new BMapGL.Point(116.404, 39.925);
          var point1 = new BMapGL.Point(103.949426,30.564815);
          var point2 = new BMapGL.Point(104.006055,30.562079);
          var point3 = new BMapGL.Point(103.980184,30.571283);
          var point4 = new BMapGL.Point(103.943317,30.589005);
          var point5 = new BMapGL.Point(103.995203,30.588632);
          var point6 = new BMapGL.Point(116.34411,39.947441);
          map.centerAndZoom(point, 15);
          map.centerAndZoom(point1, 15);
          map.centerAndZoom(point2, 15);
          map.centerAndZoom(point3, 15);
          map.centerAndZoom(point4, 15);
          map.centerAndZoom(point5, 15);
          map.centerAndZoom(point6, 15);
          // 创建点标记
          var marker = new BMapGL.Marker(point);
          var marker1 = new BMapGL.Marker(point1);
          var marker2 = new BMapGL.Marker(point2);
          var marker3 = new BMapGL.Marker(point3);
          var marker4 = new BMapGL.Marker(point4);
          var marker5 = new BMapGL.Marker(point5);
          var marker6 = new BMapGL.Marker(point6);
          map.addOverlay(marker);
          map.addOverlay(marker1);
          map.addOverlay(marker2);
          map.addOverlay(marker3);
          map.addOverlay(marker4);
          map.addOverlay(marker5);
          map.addOverlay(marker6);
          // 创建信息窗口
          var opts = {
              width: 200,
              height: 100,
              title: '故宫博物院'
          };
          var opts1 = {
              width: 200,
              height: 100,
              title: '双流机场'
          };
          var opts2 = {
              width: 200,
              height: 100,
              title: '四川大学望江校区'
          };
          var opts3 = {
              width: 200,
              height: 100,
              title: '西南民族大学'
          };
          var opts4 = {
              width: 200,
              height: 100,
              title: '中国石油'
          };
          var opts5 = {
              width: 200,
              height: 100,
              title: '成都信息工程大学'
          };
          var opts6 = {
              width: 200,
              height: 100,
              title: '北京动物园'
          };
          var infoWindow = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts);
          var infoWindow1 = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts1);
          var infoWindow2 = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts2);
          var infoWindow3 = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts3);
          var infoWindow4 = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts4);
          var infoWindow5 = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts5);
          var infoWindow6 = new BMapGL.InfoWindow('空气质量：良好 颗粒物：10μg/m3', opts6);
          // 点标记添加点击事件
          marker.addEventListener('click', function () {
              map.openInfoWindow(infoWindow, point); // 开启信息窗口
          });
                    marker1.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow1, point1); // 开启信息窗口
                    });
                    marker2.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow2, point2); // 开启信息窗口
                    });
                    marker3.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow3, point3); // 开启信息窗口
                    });
                    marker4.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow4, point4); // 开启信息窗口
                    });
                    marker5.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow5, point5); // 开启信息窗口
                    });
                    marker6.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow6, point6); // 开启信息窗口
                    });
        }
     }
 }

</script>

<style scoped>
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #container {
        left:50%;
        top:0%;
        overflow: hidden;
        width: 50%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
        position:absolute;
    }

  #chart_example{
    width: 50%;
    height: 850px;
  }
.app-main{
  height:840px;
  overflow:hidden;
}
  .app-container{
  }
  .flex{
    width:100%;
    height:100%;
      overflow:hidden;
    display:flex;
    justifyContent : space-around;
    align-items:center;
  }


</style>
